<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="选项式api中获得子组件对象" @click="getChild">
        <!-- 2）、在模板上用ref属性，给ref属性赋值为 bookref -->
        <book ref="bookref"> </book>        
        <input type="button" value="组合式api中获得子组件对象" @click="getChildComposition">
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>

<script>    

    const {createApp,ref,computed} = Vue;


    // 定义一个组件：
    let book = {
        template:`
            <h1>书籍信息：</h1>
            <p>书名:{{name}}</p>
            <slot>默认插槽</slot>
            <p>作者:{{author}}</p>
            <slot name="footer">footer插槽</slot>
        `,
        setup(props,context){       
            let msg = ref("hello");                               
            let str = ref("嘿嘿");

            function sonFn(args){
                console.log("sonFn.args",args);
            }
            
            // 4、context.expose：是父组件通过ref得到的子组件对象可以访问的属性和方法
            context.expose({
                str,sonFn
            })

            // return的内容，会挂载在vue对象上。但是，这个并不会开放给父组件
            return {
                msg
            }
        },
        // data(){
        //     return {
        //         bookmsg:"hello，我是book"
        //     }
        // },
        // methods:{
        //     bookFn(){
        //         console.log("bookFn");
        //     }
        // }
    }

    let app = createApp({
        setup(){
            // 在组合式api中使用ref，获取子组件实例
            // 1）、定义一个ref对象（ref函数的返回值）；
            let bookref = ref(null);

            // 2）、在模板上用ref属性，给ref属性赋值为 bookref
            //  这个注释在模板上找代码。


            function getChildComposition(){
                console.log("bookref",bookref);  
                console.log("bookref.value.str",bookref.value.str)//可以访问子组件的str，因为，子组件用 context.expose对外开放了
                console.log("bookref.value.msg",bookref.value.msg)//不能使用，因为没有开放

                //可以访问子组件的sonFn，因为，子组件用 context.expose对外开放了
                bookref.value.sonFn({
                    name:"王义鑫",
                    sex:"男"
                });
            }

            return {
                bookref,getChildComposition
            }
           
        },
        components:{
            book
        },
        // methods:{
        //     getChild(){
        //         // this.$refs.bookRef:可以获取到子组件的实例。
        //         const son = this.$refs.bookref;
        //         console.log("son.bookmsg",son.bookmsg);
        //         son.bookFn();
        //     }
        // }
    })

    

    app.mount("#app");



</script>